<template>
	<view class="content">
		<view class="title" style="font-size: 50rpx;  ">子组件B</view>
		
		<view class="b-box" style="margin-bottom: 20rpx;">
			CompA组件传进来的值:
			<text class="intent-text-box" style="background: #fff; padding: 5rpx 10rpx; color: blue; margin-left: 10rpx;">{{ result }}</text>
		</view>
		
		<view class="b-box">
			<text>回传值:</text>
			<input type="text" v-model="callBackValue" 
				   style="border: 1px solid #ccc; 
				   padding: 10rpx;
				   width: 150rpx; 
				   color:black; 
				   margin: 0 10rpx;
				   display: inline-flex;" />
			<button @click="sendOutside()" size="mini">回传</button>
		</view>
	</view>
</template>

<script>
	export default {
		name: "compB",
		data() {
			return {
				result: '',        // 接收CompA的值
				callBackValue: ''  // 回传值
			};
		},
		created() {
			// 监听全局事件
			this.getIntentEvent = uni.$on('getIntent', (msg) => {
				console.error("----CompB----getIntent----->" + msg);
				this.result = msg;
			});
		},
		beforeDestroy() {
			// 销毁时移除事件监听，避免内存泄漏
			uni.$off('getIntent', this.getIntentEvent);
		},
		methods: {
			sendOutside() { // 修复方法名拼写错误
				console.warn("----CompB----sendOutside------>" + this.callBackValue);
				this.$emit('callBackFun', this.callBackValue); // 触发父组件事件
			}
		}
	}
</script>
<style scoped>
.title{
	margin-bottom: 10rpx;
	display: block;
	text-align: center;
}
</style>